<template>
    <div class="view-menus-body">
        <ul class="view-menu-list" :class="{'view-menu-collapsed-list':collapsed}">
            <template v-for="item of viewMenus">
                <x-tooltip>
                    <template slot="content" v-if="item.children && item.children.length">
                        <view-sub-menu
                            v-model:checked="menuChecked"
                            ref="viewSubMenu"
                            @change="handleSubClickRow"
                            :menus="item.children"
                            :field="field"
                            :is-parent-click="isParentClick"
                            v-bind="$attrs"
                        />
                    </template>
                    <li class="view-menu-item"
                        :ref="`trigger-${item.key}`"
                        :class="{'view-menu-item-active':menuChecked.includes(item.key) || extend.includes(item.key)}"
                        @click="handleClickRow(item)"
                        :title="getName(item.title)"
                    >
                        <span class="view-item-icon"><rx-use-icon :value="item.icon"/></span>
                        <span class="view-item-text" :title="getName(item.title)">{{getName(item.title)}}</span>
                    </li>
                </x-tooltip>
            </template>
        </ul>
    </div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-12-24 11:56
 */
import viewSubMenu from "./view-sub-menu.vue";
import {RxUseIcon} from "@lowcode/jpaas-common-lib"
import {mapGetters,mapMutations} from 'vuex';
import menuPortal from "@/api/portal/core/menuPortal";
import xTooltip from './x-tooltip/x-tooltip.vue'
export default {
    name: "view-menu",
    mixins:[menuPortal],
    components:{
        viewSubMenu,RxUseIcon,xTooltip
    },
   // emits:['update:checked','update:extend','change'],
    model:{
        prop:'checked',
        event:'update:checked'
    },
    props:{
        viewMenus:{
            default:()=>[]
        },
        /* 展开的行 .sync */
        extend:{
            default:()=>[]
        },
        /* 选中的行 */
        checked:{
            default:()=>[]
        },
        field:{
            default:'key'
        },
        isParentClick:{
            default:false
        },
        /* 是否折叠 */
        collapsed:{}
    },
    data(){
        return {

        }
    },
    computed:{
        ...mapGetters({'activeKey' : 'appSetting/getActiveKey'}),
        menuChecked:{
            get(){
                return [this.activeKey];
            },
            set(v){
                this.setExtend(v[0])
                this.setActiveKey(v[0]);
            }
        }
    },
    created(){

    },
    methods:{
        ...mapMutations('appSetting', ['setActiveKey','setOpenKeys']),
        /**
         * 设置父元素选中
         * @param field
         */
        setExtend(field){
            let arr = this.getParent(field);
            let extend = arr.filter(item=>item!== field);
            this.setOpenKeys(extend)
        },
        /**
         * 点击行
         */
        handleClickRow(row){
            let {isParentClick,field} = this;
            if(!isParentClick && row.children && row.children.length){
                /* 父元素不让选择 */
                return ;
            }
            this.setExtend(row[field])
            this.setActiveKey(row[field])
            this.handMenuClick(row)
            this.$emit('change',{menu:row,broMenu:this.menus,level:-1})
        },
        handleSubClickRow(obj){
            this.handMenuClick(obj.menu)
            this.$emit('change',obj)
        },
        getName(names){
            let language = window.localStorage.getItem('language') || 'zh-CN';
            if(typeof names === "string" && names.includes(language)){
                try {
                    return new Function(`return ${names}`)()[language]
                }catch (e) {
                    return names
                }
            }else if(Object.prototype.toString.call(names) === '[object Object]'){
                return names[language]
            }
            return names
        },
        getIcon(icon){
            try {
                let icons = new Function(`return ${icon}`)()
                return icons.icon
            }catch (e) {
                return icon
            }
        },
        /**
         * 获取当前字段 所在树形数据的 所有祖先节点
         * @param field
         * @returns {[*]|*}
         */
        getParent(field){
            let getPrt = (list,field) => {
                for(let item of list){
                    if(item[this.field] === field){
                        return [field]
                    }else if(item.children && item.children.length){
                        let arr = getPrt(item.children,field);
                        if(arr){
                            return [item[this.field],...arr]
                        }
                    }
                }
            }
            return getPrt(this.menus,field) || [];
        }
    }
}
</script>

<style scoped>
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}


.view-menu-list .view-menu-item{
    line-height: 40px;
    padding-left: 24px;
    font-size: 14px;
    border-right: 2px solid transparent;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 0 6px;
    align-items: center;
}
.view-menu-list .view-menu-item-active,
.view-menu-list .view-menu-item:hover{
    border-color: #1A5EFF;
    background-color: rgba(26, 94, 255, 0.08);
    color: #1A5EFF;
}

.view-menu-collapsed-list .view-menu-item{
    padding-right: 24px;
    display: flex;
    align-items: center;
}
.view-item-text{
    transition: all .5s ;
    overflow: hidden;
    text-overflow: ellipsis;
}
.view-menu-collapsed-list .view-item-text{
    opacity:0;
    width: 0;
}

.view-item-icon{
    transition: font-size 0.2s;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-menu-collapsed-list .view-item-icon{
    font-size: 20px;
    width: 100%;
    height: auto;
    margin: 0;
    transition: all 0.2s 0.1s ;
}



</style>
<style>
/*挂载全局*/
.view-menu-children-body{
    font-size: 14px;
    position: fixed;
    background-color: transparent;
    z-index: 3000;
    padding: 10px;
    left: 210px;
    top: 60px;
}
.view-menu-children-content{
    height: 100%;
    padding: 24px 14px 14px 24px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 8px #c3c3c3;
}
.view-menu-children-roll{
    height: 100%;
    overflow: scroll;
}

.view-menu-window.view-menu-window-all{
    overflow: auto;
    top: 60px !important;
    bottom: 10px !important;
}
.view-menu-window{
    max-width: initial !important;
}
.view-menu-window .ant-tooltip-arrow{
    display: none;
}
.view-menu-window .ant-tooltip-inner{
    background-color: white;
    color: #555;
}



.view-tooltip-overlay{
    position: fixed;
    z-index: 1000;
    padding: 8px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    left: 0;
    top: 0;
}
</style>